<%--
  Created by IntelliJ IDEA.
  User: Sky
  Date: 2019/4/10
  Time: 11:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/images/fiveite.ico">

    <title>人流量检测系统</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/my_animation.css" type="text/css"/>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1126822_bheq7e6ga8.css" type="text/css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/components.css" type="text/css"/>
</head>

<body>
<div class="modal fade" id="operateAcc" tabindex="-1" role="dialog" aria-labelledby="operateAcc" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="operateAccTitle">更换账号</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="operateAccBody" class="modal-body">
                <div class="row">
                    <div class="col-8">
                        <div class="accItem nowAcc" id="nowAcc"></div>
                        <div class="accItem addAcc" id="addAcc">
                            <div class="input-group addInput">
                                <div class="input-group-prepend">
                                    <span class="input-group-text iconfont">&#xe634;</span>
                                </div>
                                <input type="text" id="account" class="form-control" onblur="" placeholder="账号"
                                       aria-label="Username" aria-describedby="addon-wrapping">
                            </div>
                            <div class="input-group addInput">
                                <div class="input-group-prepend">
                                    <span class="input-group-text iconfont">&#xe63e;</span>
                                </div>
                                <input type="password" id="password" class="form-control" placeholder="密码"
                                       aria-label="Username" aria-describedby="addon-wrapping">
                            </div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="emptyCheckDiv"></div>
                        <div class="accCheck">没有该账号</div>
                        <div class="pwdCheck">密码错误</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="universalBtn secondary" data-dismiss="modal">取消</button>
                <button type="button" id="change" class="universalBtn primary" disabled>确认更换</button>
            </div>
        </div>
    </div>
</div>
<div id="bg">
    <div id="lg_nav" class="lg_nav hidden-sm fixed-top colorBg">
        <div id="lg_nav_topd">

        </div>
        <div id="lg_nav_buttom">
            <a href="${pageContext.request.contextPath}/default" class="lg_nav_item  unAbleSelect"><p class="logo"><i class="iconfont">&#xe630;</i>
                <span id="logo" class="logoico">人流量预警云平台</span></p></a>
            <a href="${pageContext.request.contextPath}/realtime" class="lg_nav_item bk_hover">实时预警</a>
            <a class="lg_nav_item bk_hover bk_active">历史记录</a>
            <a href="${pageContext.request.contextPath}/admin/handler" id="admin" class="lg_nav_item bk_hover adminBtn hide">管理员<label
                    class=""></label></a>
            <a href="${pageContext.request.contextPath}/setting" class="lg_nav_item bk_hover">设置</a>
            <div id="headerFeild" class="lg_nav_item">
                <div class="headerTop head_hover">
                    <span id="nickname">正在加载</span>
                </div>
                <div class="accSet colorBg">
                    <ul>

                        <li id="changeAcc">更换账号</li>
                        <li id="logoutAcc"><a href="${pageContext.request.contextPath}/">退出账号</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="default_layout colorBg">
        <div class="grad interval"></div>
    </div>
</div>
<div class="m_layout">
    <div class="side_layout normal_side">
        <ul id="addFeild">

        </ul>
    </div>
    <div class="main_layout m_container">
        <canvas class="local" id="canvas1"></canvas>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
<script src="${pageContext.request.contextPath}/js/jquery.cookie.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"
        async></script>
<script type="text/javascript" charset="utf8"
        src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jQuery.md5.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<script src="${pageContext.request.contextPath}/js/utils.js"></script>
<script src="${pageContext.request.contextPath}/js/public.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        cookiesAuth();
        let AjaxLocation = "万达广场";
        getHistory(AjaxLocation);
        (function () {
            $.miniAjax(
                "${pageContext.request.contextPath}/api/location",
                function (data) {
                    let head = "";
                    const ajaxParmas = function () {
                        return AjaxLocation
                    };
                    console.log(data[0].findIndex(ajaxParmas));
                    for (let i = 0; i < data.length; i++) {
                        head += "<li> <div class='side_item_btn'>&nbsp;" + data[i][0].location + "</div> <ul class='side_item_item _close'>";
                        for (let s = 0; s < data[i].length; s++) {
                            if (data[i][s].sublocation === AjaxLocation) {
                                head += "<li data-sub='" + data[i][s].sublocation + "' class='side_item_item_btn side_active'>" + data[i][s].sublocation + "</li>";
                            } else {
                                head += "<li data-sub='" + data[i][s].sublocation + "' class='side_item_item_btn'>" + data[i][s].sublocation + "</li>";
                            }
                        }
                        head += "</ul></li>";
                    }
                    $("#addFeild").html(head);
                    $(".side_item_item_btn.side_active").parent().slideDown('fast');
                    $(".side_item_item_btn.side_active").parent().prev().addClass('slide_active');
                }
            );
        })();
        const ctx1 = document.getElementsByClassName('local')[0].getContext('2d');
        const option = {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: '最高人数',
                    backgroundColor: window.chartColors.red,
                    borderColor: window.chartColors.red,
                    data: [],
                    fill: false
                }]
            },
            options: {
                responsive: true,
                animation: {},
                title: {
                    display: true,
                    text: '上月每日最高人流量'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: '日期'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: '人数'
                        },
                        ticks: {
                            suggestedMin: 0,
                            suggestedMax: 50
                        }
                    }]
                }
            }
        };
        const myChart = window.myLine = new Chart(ctx1, option);

        function updateConfigAsNewObject(chart, mLocation, mData, tData) {
            chart.type="bar";
            chart.data.datasets.forEach(function (dataset) {
                // dataset.data = dataset.data.map(function() {
                //     return 3250;
                // });
                dataset.data = mData
            });
            chart.data.datasets.label = mLocation;
            chart.options.title.text = mLocation + '最近三十天每日最高人数';
            chart.data.labels = tData;
            chart.update();
        }

        function getHistory(sublocation) {
            $.liteAjax(
                "${pageContext.request.contextPath}/api/getLocationData",
                {sublocation: sublocation, begintime:getdate(0),endtime:getdate(1)},
                function (data) {
                    const date = [];
                    console.log(data[0].length);
                    if (data[0].length === 0 || data[1].length === 0) {
                        console.log(data[0].length);
                        message("该地区上个月没有数据", 1000, "alert-secondary")
                    }
                    for (index of data[0]) {
                        date.push(index.toString().substring(6, 8).replace(/\b(0+)/gi, "") + "日");
                    }
                    updateConfigAsNewObject(myChart, sublocation, data[1], date);
                }
            );
        }

        $(document).on("click", ".side_item_item_btn", function () {
            let sublocation = $(this).attr('data-sub');
            getHistory(sublocation);
            $(".side_item_item_btn").removeClass("side_active");
            $(this).addClass("side_active");
        });
        $(document).on("click", ".side_item_btn", function (e) {
            if ($(this).next().css('display') === 'none') {
                // $(".side_item_item").slideUp('fast');
                // $(".side_item_btn").removeClass('side_active');
                $(this).next().slideDown('fast');
                $(this).addClass("side_active");

            } else {
                $(this).removeClass('side_active');
                $(this).next().slideUp('fast');
            }
        });
    });
</script>
</body>
</html>